<!DOCTYPE html>
<html lang="en">
<head>
    <title>Chess Console</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <link rel="stylesheet" href="../node_modules/@fortawesome/fontawesome-free/css/all.min.css"/>
    <link rel="stylesheet" href="../assets/styles/screen.css"/>
    <!-- The following two lines make it compatible to browsers without support of ES6 Modules, modern browser ignore them -->
    <script nomodule src="../node_modules/browser-es-module-loader/dist/babel-browser-build.js"></script>
    <script nomodule src="../node_modules/browser-es-module-loader/dist/browser-es-module-loader.js"></script>
</head>
<body>
<div class="container-fluid">
    <h1><a href="../">chess-console</a>
        <small>Load a game from a PGN with [SetUp "1"] and FEN</small>
    </h1>
    <div id="console-container"></div>
    <p class="mt-4">The loaded PGN:</p>
    <pre id="pgnOutput"></pre>
</div>
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script type="module">

    import {ChessConsole} from "../src/chess-console/ChessConsole.js"
    import {LocalPlayer} from "../src/chess-console/players/LocalPlayer.js"
    import {RandomPlayer} from "../src/chess-console/players/RandomPlayer.js"
    import {Board} from "../src/chess-console/components/Board/Board.js"
    import {GameStateOutput} from "../src/chess-console/components/GameStateOutput.js"
    import {History} from "../src/chess-console/components/History.js"
    import {CapturedPieces} from "../src/chess-console/components/CapturedPieces.js"
    import {HistoryControl} from "../src/chess-console/components/HistoryControl.js"
    import {GameControl} from "../src/chess-console/components/GameControl/GameControl.js"
    import {Sound} from "../src/chess-console/components/Sound.js"
    import {Persistence} from "../src/chess-console/components/Persistence.js"

    const pgn =
        `[SetUp "1"]
[FEN "ppppkppp/pppppppp/pppppppp/pppppppp/8/8/8/RNBQKBNR b KQ - 0 1"]`

    const chessConsole = new ChessConsole(
        document.getElementById("console-container"),
        {name: "Player", type: LocalPlayer},
        {name: "Opponent", type: RandomPlayer},
        {
            soundSpriteFile: "../assets/sounds/chess_console_sounds.mp3",
            chessboardSpriteFile: "../assets/images/chessboard-sprite.svg",
            debug: true
        }
    )
    chessConsole.addComponent(Board).then(() => {
        chessConsole.addComponent(Persistence)
            .then(() => {
                chessConsole.initGame({
                    playerColor: "w",
                    pgn: pgn
                })
            })

    })
    chessConsole.addComponent(GameStateOutput)
    chessConsole.addComponent(History)
    chessConsole.addComponent(HistoryControl)
    chessConsole.addComponent(CapturedPieces)
    chessConsole.addComponent(GameControl)
    chessConsole.addComponent(Sound)
    document.getElementById("pgnOutput").innerText = pgn
</script>
</body>
</html>